<template>
  <div> 
    <div>
      <van-swipe class="!bg-[#39a9ed] !h-[46vh]" :autoplay="3000" indicator-color="white" lazy-render>
        <van-swipe-item class="relative overflow-hidden">
          <van-image width="100%" height="100%" fit="fill" :src="banner1" />
          <div class="z-10 absolute bottom-10 left-6 text-white">
            <div class="text-[12px] font-bold">
              {{ $t('forBetterLife') }}
            </div>
            <div class="text-[35px]">
              {{ $t('ByteDanceTitle') }}
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-tabs v-model:active="active" class="!mt-2" title-active-color="#1989fa" @change="handleChange">
      <van-tab v-for="item in category" :title="item.name" :name="item.value" />
      <!-- <van-tab :title="$t('tabs.welfareChart')" />
      <van-tab :title="$t('tabs.musicChart')" />
      <van-tab :title="$t('tabs.filmChart')" />
      <van-tab :title="$t('tabs.financeChart')" />
      <van-tab :title="$t('tabs.liveBroadcastChart')" /> -->
    </van-tabs>
    <van-config-provider :theme-vars="themeVars">
      <van-cell-group :border="false" inset class="!mb-16">
        <van-cell v-for="(item, i) in list" :key="item.id" :border="false" @click="handleClick(item.link)">
          <template #title>
            <div class="flex justify-start items-center gap-4 leading-[2rem]">
              <div 
                :class="{ 
                  'text-red-500': i === 0, 
                  'text-orange-500': i === 1,
                  'text-orange-300': i === 2,
                }"
              >
                {{ i + 1 < 10 ? `0${i + 1}` : i + 1 }}
              </div>
            <div class="flex-1 flex flex-row justify-between items-center">
                <div class="flex gap-4">
                <img :src="item.images" class="rounded-lg w-[2.1rem] h-[2.1rem]"  />
                  <span class="max-sm:w-[9.8rem] w-full text-ellipsis overflow-hidden whitespace-nowrap">
                    {{ item[activeLang] || item.title }}
                  </span>
                </div>
                <div>
                  {{ item.scanNum }}
                  {{ $t('tenThousand') }}
                </div>
            </div>
            </div>
          </template>
        </van-cell>
      </van-cell-group>
    </van-config-provider>
  </div>
</template>
<script setup lang="ts">
import banner1 from "@/assets/images/banner-1.jpg"

import { useUserStore } from "@/store/user"

import { getCategoryItem, propagandaItem } from "@/service/login"

const themeVars = {
  "cell-background": "#e2e8f0"
}

const user = useUserStore()

const activeLang = computed(() => user.lang.split('-')[0])

const active = ref<string>('1')

const category = ref<Record<string, any>[]>([])

const getCategory = async () => {
  const res = await getCategoryItem({
    tenantId: '10068',
    lang: user.lang.split('-')[0]
  })

  if(!res.success) return 

  category.value = res.data
}

onBeforeMount(() => getCategory())


const list = ref<Record<string, any>[]>([])

const getList = async () => {
  const res = await propagandaItem({
    tenantId: '10068',
    category: active.value
   })
   if(!res.success || !res.data || !category.value.length) return list.value = []

  list.value = (res.data?.records || []).map((v: any) => {
    const langTitleRecord = v.langList.length ? v.langList.reduce((p: any, c: any) => {
      return Object.assign(p, { [c.lang]: c.title })
    }, {}) : {}
    return Object.assign(v, langTitleRecord)
  })
}

onBeforeMount(() => getList())

const handleChange = () => getList()

const handleClick = (url: string) => {
  if(!url) return 
  window.open(url)
}

watch(activeLang, () => {
  getCategory()
  getList()
})
</script>

<style lang="less" scoped></style>
